<template>
	<div class="race-index">
		<div class="top-search-wrapper">
			<div style="display: flex;align-items: center;">
				<div style="display: flex;align-items: center;">
					<span style="font-size: 14px;">池子名称：</span>
					<el-input v-model="searchForm.poolName" style="width: 250px;margin-right: 10px;" clearable placeholder="请输入池子名称"
						size="small" />
				</div>
			</div>
			<div>
				<el-button @click="go2Reset" size="mini">重置</el-button>
				<el-button type="primary" @click="go2Search" size="mini">查询</el-button>
			</div>
		</div>
		<el-divider />
		
		<div style="margin-bottom: 10px;display: flex;align-items: center;justify-content: flex-end;">
			<el-link type="primary" icon="el-icon-circle-plus-outline" :underline="false" @click="go2Add">新增池子</el-link>
			<el-divider direction="vertical"></el-divider>
			<i style="color: #1890ff;cursor: pointer;" class="el-icon-refresh" @click="go2Refresh"></i>
		</div>
		
		<div class="table-content-wrapper">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="poolName" label="池子名称" align="center" header-align="center" />
				<el-table-column prop="poolImagePath" label="池子照片" align="center" header-align="center">
					<template slot-scope="scope">
						<el-image style="width: 300px; height: 100px;border-radius: 5px;" :src="baseUrl + scope.row.poolImagePath" :preview-src-list="[baseUrl+scope.row.poolImagePath]">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="sex" label="操作" header-align="center" align="center" width="220">
					<template slot-scope="scope">
						<el-button type="text" size="mini" icon="el-icon-edit" @click="go2Edit(scope.row)">编辑
						</el-button>
						<el-button type="text" size="mini" icon="el-icon-info" @click="go2AddExtendInfo(scope.row)">扩展信息
						</el-button>
						<el-button type="text" size="mini" icon="el-icon-delete" @click="go2Del(scope.row)">
							删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="margin-top: 15px;text-align: right;" :current-page="page.pageNo"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<add-or-edit v-if="dialogVisible && dialogType === 'edit'" :origin-data="currentSelect" @close="go2Close" />
			<add-or-edit-extend-info v-if="dialogVisible && dialogType === 'info'" :origin-data="currentSelect" @close="go2Close"></add-or-edit-extend-info>
		</el-dialog>
	</div>
</template>

<script>
	import addOrEdit from './addOrEdit.vue'
	import addOrEditExtendInfo from './addOrEditExtendInfo.vue'

	import {
		fetchList,
		deleteById
	} from '@/api/yongyue/waterPool.js'

	export default {
		components: {
			addOrEdit,
			addOrEditExtendInfo
		},
		data() {
			return {
				searchForm: {
					poolName: ""
				},
				tableData: [],
				dialogVisible: false,
				dialogTitle: '提示',
				dialogType: "edit",
				page: {
					pageNo: 1,
					pageSize: 10,
					total: 0
				},
				currentSelect: {},
				baseUrl: process.env.VUE_APP_BASE_API,
			}
		},
		mounted() {
			this.go2Query()
		},
		methods: {
			go2AddExtendInfo(data){
				this.dialogType = "info"
				this.dialogTitle = '扩展信息'
				this.currentSelect = {
					...data
				}
				this.dialogVisible = true
			},
			go2Refresh(){
				this.page.pageNo = 1
				this.go2Query()
			},
			go2Search(){
				this.page.pageNo = 1
				this.go2Query()
			},
			handleSizeChange(val) {
				this.page.pageSize = val
				this.go2Query()
			},
			handleCurrentChange(val) {
				this.page.pageNo = val
				this.go2Query()
			},
			go2Query() {
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				const params = {
					page_no: this.page.pageNo,
					page_size: this.page.pageSize,
					pool_name: this.searchForm.poolName
				}
				fetchList(params).then((res) => {
					loading.close()
					if (res.code === 200) {
						const message = res.data
						this.tableData = message.items
						this.page.total = message.total
					}
				}).catch((error) => {
					loading.close()
					console.log(error)
				})
			},
			go2Edit(data) {
				this.dialogTitle = '编辑池子'
				this.dialogType = "edit"
				this.currentSelect = {
					...data
				}
				this.dialogVisible = true
			},
			go2Del(row) {
				this.$confirm('此操作将会删除所有数据，是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '处理中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					deleteById(row.id).then((res) => {
						loading.close()
						const message = res.message
						this.$message.success('删除数据成功')
						this.go2Query()
					}).catch((error) => {
						loading.close()
						console.log(error)
					})
				}).catch((err) => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			go2Add() {
				this.dialogTitle = '新增池子'
				this.dialogType = "edit"
				this.currentSelect = {}
				this.dialogVisible = true
			},
			handleClose() {
				this.dialogVisible = false
			},
			go2Close() {
				this.dialogVisible = false
				this.go2Query()
			},
			go2Reset(){
				this.searchForm = {
					poolName: ""
				}
				this.go2Query()
			}
		}
	}
</script>

<style lang="scss">
	.race-index {
		padding: 20px;

		.top-search-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.table-content-wrapper {
			// margin-top: 15px;
		}

		.el-divider--horizontal {
			margin: 15px 0;
		}

	}
</style>